﻿@model IEnumerable<System.Collections.Specialized.NameValueCollection>
@{
    Layout = "~/Areas/Sites/Views/PageDesign/Design.cshtml";
}
@section HeadContent{
    <script type="text/javascript">
        function getDesignerType(types) { return types['module']; }
    </script>
}

<h1 class="title">@("Modules".Localize())</h1>
<div class="simple-table">
    <table>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        <input type="radio" name="ModuleName" id="@Html.Raw(item["ModuleName"])" value="@Html.Raw(item["ModuleName"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])LinkToEntryName" value="@Html.Raw(item["LinkToEntryName"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])EntryName" value="@Html.Raw(item["EntryName"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])EntryAction" value="@Html.Raw(item["EntryAction"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])EntryController" value="@Html.Raw(item["EntryController"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])Values" value="@Html.Raw(item["Values"])" />
                        <input type="hidden" id="@Html.Raw(item["ModuleName"])EntryOptions" value='@Html.Raw(item["EntryOptions"])' />
                        <label for="@Html.Raw(item["ModuleName"])">
                            @Html.Raw(item["ModuleName"])
                        </label>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div class="common-form in-dialog">
    <input type="hidden" id="LinkToEntryName" name="Entry.LinkToEntryName" />
    <table>
        <tr>
            <th></th>
            <td>
                <input type="checkbox" id="exclusive" name="Exclusive" value="True" />
                <label class="inline" for="exclusive">
                    @("Exclusive".Localize())
                </label>
                <em class="tip">@("If checked, links within this module will not contains URL parameters of other modules in the same page.".Localize())</em>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <input type="checkbox" id="skipError" name="SkipError" value="true" />
                <input type="hidden" name="SkipError" value="false" />
                <label for="skipError" class="inline">@("On Error Resume Next".Localize())</label>
                <em class="tip">@Html.Raw("When a run-time error occurs, the error will be skipped and continue executing the rest of page.".Localize())</em>
            </td>
        </tr>
        <tr>
            <th>
                <label for="EntryController">
                    @("Position ID".Localize())
                </label>
            </th>
            <td>
                <input type="text" class="medium" name="PagePositionId" id="PagePositionId" />
                <em class="tip">@("Set friendly id will be used in ModuleUrl.".Localize())</em>
            </td>
            @{ViewBag.PagePositionIdRendered = true;}
        </tr>
        <tr>
            <th>
                <label for="EntryController">
                    @("Entry name".Localize())
                </label>
            </th>
            <td>
                <select id="EntryOptions" class="medium" name="Entry.Name"></select>
            </td>
        </tr>
        <tr>
            <th>
                <label for="EntryController">
                    @("Entry controller".Localize())
                </label>
            </th>
            <td>
                <input type="text" class="medium" id="EntryController" name="Entry.Controller" />
                <em class="tip">@("Initial MVC controller when this module first loaded on a page".Localize())</em>
            </td>
        </tr>
        <tr>
            <th>
                <label for="EntryAction">
                    @("Entry action".Localize())
                </label>
            </th>
            <td>
                <input type="text" class="medium" id="EntryAction" name="Entry.Action" />
                <em class="tip">@("Initial MVC action when this module first loaded on a page".Localize())</em>
            </td>
        </tr>
        <tr>
            <th>
                <label for="">
                    @("Default values".Localize())
                </label>
            </th>
            <td>
                <table class="key-value" id="DefaultValuesTemplate">
                    <thead data-bind="visible: data().length > 0">
                        <tr>
                            <th>
                                @("Key".Localize())
                        </th>
                        <th>
                            @("Value".Localize())
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: data">
                <tr>
                    <td>
                        <input type="text" title='key' name="Key" class="short" data-bind="value: $data.Key, attr: { name: $parent.getPrefixFieldName($index()) + 'Key' }" />
                    </td>
                    <td>
                        <input type="text" name="Value" data-bind="value: $data.Value, attr: { name: $parent.getPrefixFieldName($index()) + 'Value' }" />
                    </td>
                    <td>
                        <a class="action" data-bind="click: $parent.removeItem">@Html.IconImage("minus")</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><a class="action" data-bind="click: $data.addItem">@Html.IconImage("plus")</a></td>
                </tr>
            </tfoot>
        </table>
    </td>
</tr>
</table>
</div>
<script type="text/javascript">
    $(function () {

        function AppViewModel() {
            var self = this;

            self.data = ko.observableArray([]);

            self.addItem = function () {
                self.data.push({ Key: '', Value: '' });
            };

            self.removeItem = function () {
                self.data.remove(this);
            };

            self.renew = function (arr) {
                self.data.removeAll();
                _.each(arr, function (item) {
                    self.data.push(item);
                });
            };

            var namePrfix = 'Entry.Values';
            self.getPrefixFieldName = function (index) {
                return namePrfix + '[' + (index) + '].';
            };
        }
        var $template = $('#DefaultValuesTemplate');
        var model = new AppViewModel()
        $template.data("KO_ViewModel", model);
        ko.applyBindings(model, $template[0]);
    });
</script>
